<template>
  <div class="message-win" ref="message-wins" :style="{'display':displayStyle}">
    <div class="message-content-div">
      <BaseWin ref="message-slot">
        <div slot="content">{{message}}</div>
        <Button text="确定" :click-function="sure" slot="foot"/>
        <Button text="取消" :click-function="refuse" slot="foot"/>
      </BaseWin>
    </div>
  </div>
</template>

<script>
import BaseWin from "@/components/win/BaseWin";
import Button from "@/components/button/ButtonComponent";

export default {
  name: "MessageConfirmComponent",
  components: {Button, BaseWin},
  data(){
    return{
      displayStyle:'none'
    }
  },
  props:{
    message:String,
    sureFunction:Function,
    refuseFunction:Function
  },
  methods:{
    sure:function () {
      this.closeWin();
      this.sureFunction.call(this);
    },
    refuse:function () {
      this.closeWin();
      this.refuseFunction.call(this);
    },
    closeWin:function (){
      this.displayStyle = 'none';
    },
    showWin:function (){
      this.displayStyle = 'block';
    }
  },
}
</script>

<style scoped>
.message-content-div{
  margin: auto;
  text-align: center;
}
</style>